// App.tsx
import React, { useState } from 'react';
import { Layout, Button, Drawer } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import ChatArea from './ChatArea';
import InputArea from './InputArea';
import './App.css';

const { Header, Content, Footer } = Layout;

const App: React.FC = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const [visible, setVisible] = useState<boolean>(false);

  const handleSendMessage = (message: string) => {
    setMessages([...messages, message]);
  };

  const handleDrawerToggle = () => {
    setVisible(!visible);
  };

  return (
    <Layout style={{ minHeight: '100vh', background: 'rgb(38,38,38)' }}>
      <Layout style={{ background: 'rgb(38,38,38)' }}>
        <Header className="header" style={{ 
          textAlign: 'left', 
          background: 'rgb(38,38,38)',
          height: 'auto',
          padding: '20px 40px'
        }}>
          <Button
            onClick={handleDrawerToggle}
            style={{
              marginBottom: '20px',
              background: 'transparent',
              color: '#fff',
              border: 'none',
              fontSize: '20px'
            }}
          >
            {visible ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
          </Button>
          <div style={{ 
            marginTop: '20px', 
            fontSize: '32px', 
            fontWeight: 300,
            color: '#fff'
          }}>
            Good afternoon, i9
          </div>
        </Header>
        <Content style={{ 
          padding: '0 40px', 
          display: 'flex', 
          flexDirection: 'column',
          height: 'calc(100vh - 200px)',
          background: 'rgb(38,38,38)'
        }}>
          <div style={{ flex: 1, overflowY: 'auto' }}>
            <ChatArea messages={messages} />
          </div>
          <div style={{ 
            position: 'fixed', 
            bottom: '220px', 
            left: '50%', 
            transform: 'translateX(-50%)',
            width: '100%',
            maxWidth: '800px',
            padding: '0 20px'
          }}>
            <InputArea onSendMessage={handleSendMessage} />
          </div>
        </Content>
        <Footer style={{
          padding: '20px 40px',
          background: 'rgba(255, 255, 255, 0.05)',
          height: '200px',
          overflowY: 'auto',
          position: 'fixed',
          bottom: 0,
          width: '100%'
        }}>
          <div className="chat-session-list">
            {messages.map((msg, index) => (
              <div key={index} className="chat-session-item" style={{
                padding: '10px',
                margin: '5px 0',
                borderRadius: '8px',
                background: 'rgba(255, 255, 255, 0.1)',
                cursor: 'pointer'
              }}>
                <p style={{ margin: 0, color: '#fff' }}>{msg}</p>
              </div>
            ))}
          </div>
        </Footer>
      </Layout>
      <Drawer
        title="历史聊天"
        placement="left"
        closable={false}
        onClose={handleDrawerToggle}
        open={visible}
        width={300}
        style={{
          backgroundColor: 'rgb(38,38,38)'
        }}
      >
        <div className="history-chat-list">
          {messages.map((msg, index) => (
            <div key={index} className="chat-message">
              <p>{msg}</p>
            </div>
          ))}
        </div>
      </Drawer>
    </Layout>
  );
};

export default App;